<template>
    <van-cell title="昵称" is-link to="/user/edit" :value="user.username" @click="toEdit('username',user.username,'昵称')" />
    <van-cell title="账号"  :value="user.userAccount" />
    <van-cell title="头像" is-link  to="/user/edit" >
        <img :src="user.avatarUrl">
    </van-cell>
    <van-cell title="性别" is-link to="/user/edit" :value="user.gender" @click="toEdit('gender',user.gender,'性别')" />
    <van-cell title="电话" is-link to="/user/edit" :value="user.phone" @click="toEdit('phone',user.phone,'电话')" />
    <van-cell title="邮箱" is-link to="/user/edit" :value="user.email" @click="toEdit('email',user.email,'邮箱')" />
    <van-cell title="星球编号"  :value="user.planetCode"/>
    <van-cell title="注册时间"  :value="user.createTime"/>

</template>

<script setup lang="ts">

import {useRouter} from "vue-router";

let router = useRouter();

// toto 模拟数据
const user = {
    id: 1,
    username: '鱼皮',
    userAccount: 'dogYupi',
    avatarUrl: 'http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png',
    gender: '男',
    phone: '123112312',
    email: '12345@qq.com',
    planetCode: '1234',
    createTime: `${new Date()}`
}
/**
 *
 * @param editKey 属性的关键字
 * @param currentValue 属性的值
 * @param editName 属性的中文名字
 */
const toEdit=(editKey:string,currentValue: string,editName:string)=>{
    router.push({
        path:'/user/edit',
        query:{
            editKey,
            currentValue,
            editName
        }
    })
}
</script>

<style scoped>

</style>